<template>
  <div
    @click.stop="toggleCollapsed"
    class="trigger-box h-full flex"
    :class="[
      {
        'border-top': !getCollapsed,
        'mx-4': !getCollapsed,
      },
      getMenuTheme,
    ]"
  >
    <div
      class="icon"
      :class="{
        'flex-1': getCollapsed,
        'text-center': getCollapsed,
      }"
    >
      <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else
    /></div>
    <div
      class="trigger-desc overflow-hidden"
      :class="{
        'w-0': getCollapsed,
        'ml-2': !getCollapsed,
      }"
    >
      收起导航
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

  export default defineComponent({
    name: 'SiderTrigger',
    components: { MenuFoldOutlined, MenuUnfoldOutlined },
    setup() {
      const { getCollapsed, toggleCollapsed, getMenuTheme } = useMenuSetting();

      return { getCollapsed, toggleCollapsed, getMenuTheme };
    },
  });
</script>

<style lang="less" scoped>
  .trigger-box {
    text-align: left;

    .icon {
      font-size: 20px;
    }

    &.dark {
      color: rgb(255 255 255 / 65%);
    }

    &.light {
      color: rgb(0 0 0 / 65%);
    }

    &.border-top {
      border-top: 1px solid rgb(255 255 255 / 20%);
    }

    .trigger-desc {
      margin-top: 2px;
      transition: all @ease-in-out 0.3s;
    }
  }
</style>
